<template>
  <view class="flex-row">
    <xbc-message-read v-if="message && message.createTime" :show="showReadStatus && !['group'].includes(message.conversationType) && isSenderThemselve" :isRead="isRead" />
    <xbc-loading v-if="!message.createTime"></xbc-loading>
	<view
      @tap="playVideo"
      class="chat-message-video flex-column" 
      :style="style" 
      :class="{reverse: isReverse && isSenderThemselve}">
      <image class="chat-message-video-cover" :src="messageContent.data.coverUrl" />
      <view class="chat-message-video-mask flex-column">
        <text class="chat-message-video-play iconfont icon-play"></text>
      </view>
     <view class="chat-message-video-info flex-row">
        <span>{{ videoSize }}</span>
        <span>{{ videoDuration }}</span>
      </view>
    </view>
  </view>
</template>

<script>
import XBCIM from 'xbcim'
import mixins from '@/mixins'
import { messageProps } from '@/hooks/useMessage'

export default{
	mixins: [mixins],
	props: messageProps,
	data(){
		return {
			size: {width: 0, height: 0}
		}
	},
	computed: {
		style(){
			const { width, height } = this.messageContent?.data
			this.size.width = width
			this.size.height = height
			return XBCIM.util.getImageSize(this.size.width, this.size.height, 200)
		},
		videoSize(){
			return XBCIM.util.formatBytes(this.messageContent.data.size)
		},
		videoDuration(){
			return XBCIM.util.formatDuration(this.messageContent.data.duration)
		}
	},
	methods: {
		// 初始化播放器
		playVideo() {
		  uni.navigateTo({
		  	url: '/pages/chat/video?src='+encodeURIComponent(this.messageContent?.data?.url)
		  })
		}
	}
}
</script>

<style lang="scss" scoped>
.chat-message-video {
  width: 400rpx;
  height: 250rpx;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  border-radius: 0 10rpx 10rpx 10rpx;

  &.reverse {
    border-radius: 10rpx 0 10rpx 10rpx;
  }

  &-cover {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  &-mask {
    @include fullsize();
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
  }

  &-info {
    width: 100%;
    color: #f5f5f5;
    font-size: 24rpx;
    padding: 10rpx 16rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.8) 100%);
  }

  &-play {
    color: #f5f5f5;
    font-size: 76rpx;
  }
}
</style>